<template>
	<view>
		<view class="bkcolor">
			<view class="title">
				<view class="back" @click="back">
					<image :src="baseUrl + 'images/static/home/back.png'" class="bk"></image>
				</view>
				<view class="titleName">快速匹配</view>

			</view>
		</view>
		<view class="content">
			<view class="teacherCard">
				<view class="card1">
					<view class="cardTxt">{{resumeInfo.expertise}}翻译官</view>
					<view class="cardTxt1">
						<text class="sign">￥</text>
						<text>{{resumeInfo.Price[0]}}</text>
						<text>-</text>
						<text>{{resumeInfo.Price[1]}}</text>
					</view>
				</view>
				<view class="tags">
					<view class="tag"><u-icon name="calendar-fill"></u-icon>
						<text class="txt1">{{resumeInfo.experience}}年经验</text>
					</view>
					<view class="tag"><u-icon name="account-fill"></u-icon>
						<text class="txt1">{{resumeInfo.colleges}}</text>
					</view>
					<view class="tag"><u-icon name="server-man"></u-icon>
						<text class="txt1">服务类型:{{resumeInfo.skills}}</text>
					</view>
				</view>
				<view class="city">
					<view class="cityTxt">
						<view> <text>{{resumeInfo.city[0]}}</text>
							在线接单中</view>
						<view>
							<image :src="baseUrl + 'images/static/resume/Frame@2x(4).png'" mode="" class="cityICON">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 老师名字 -->
			<view class="teacherDetail">
				<view class="teacherBOX">
					<image :src="getgenderImage(resumeInfo.gender)" mode="" class="teacherImage"></image>
					<view class="detail">
						<view class="name">{{resumeInfo.name}}
							<image :src="baseUrl + 'images/static/home/Component 1@2x.png'" mode="" class="leveicon">
							</image>
						</view>
						<!-- <view class="time">服务时长：2h</view> -->
					</view>
				</view>
			</view>
			<!-- 个人履历 -->
			<view class="teacherResume">
				<view class="title">个人履历
					<image :src="baseUrl + 'images/static/resume/Rectangle 43@2x.png'" mode="" class="bk"></image>
				</view>
				<view class="contents">
					{{resumeInfo.resume}}
				</view>
			</view>
		</view>
		<!-- 咨询按钮 -->
		<view class="buttom">
			<view class="collection" @click="addCollect">
				<image :src="baseUrl + 'images/static/resume/collectioned.png'" mode="" class="college"
					v-if="isCollect"></image>
				<image :src="baseUrl + 'images/static/resume/collection.png'" mode="" class="college" v-else></image>
				<view class="ctxt">收藏</view>
			</view>
			<!-- 	<view class="btn">	<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom">立即咨询</button></view> -->
			<!-- <view class="btn"><u-button type="primary" :plain=true @click="contact">立即咨询</u-button></view> -->
			<view class="btn"><u-button type="primary" @click="buyNow">立即咨询</u-button></view>
		</view>
		<!-- 购买服务弹出 -->
		<u-popup v-model="show" mode="bottom" border-radius="64" width="500rpx" height="600px">
			<view class="showbox">
				<view class="teacherName">
					<text class="t1">左女士</text>
					<text class="t2">￥</text>
					<text class="t3">500-1000</text>
				</view>
				<view class="concat">
					<image :src="baseUrl + 'images/static/resume/Frame@2x.png'" mode="" class="phone"></image>
					<text class="phoneNumber">1388888888</text>
				</view>
				<!-- //订单信息 -->
				<view class="orderDetail">
					<view class="content1">
						<view class="t1">翻译形式</view>
						<view class="t2">人工翻译</view>
					</view>
					<view class="content1">
						<view class="t1">翻译金额</view>
						<view class="t2">￥1000</view>
					</view>
					<!-- 订单 -->
					<view class="orderInformation">
						<view class="txt">订单信息</view>
						<view class="number">***********</view>
					</view>
					<view class="orderInformation">
						<view class="txt">翻译编号</view>
						<view class="number">***********</view>
					</view>
				</view <!-- 支付方式 -->
				<view class="payWay">
					<radio-group @change="radioChange">
						<view class="wxpay">
							<view class="wx">
								<image :src="baseUrl + 'images/static/resume/Frame@2x(1).png'" mode="" class="wximg">
								</image>
								<text class="wxtxt">微信支付</text>
							</view>
							<view>
								<radio name='paymentMethod' value='wxpay' class="radio-btn" color='#00A0F7'></radio>
							</view>
						</view>
						<view class="wxpay">
							<view class="wx">
								<image :src="baseUrl + 'images/static/resume/Frame@2x(2).png'" mode="" class="wximg">
								</image>
								<text class="wxtxt">支付宝支付</text>
							</view>
							<view>
								<radio name='paymentMethod' value='zfbpay' class="radio-btn" color='#00A0F7'></radio>
							</view>
						</view>
					</radio-group>
				</view>
		
		
			</view>
			<!-- //立即支付 -->
			<view class="pay">
				<view class="paybtn"><u-button type="primary" @click="payNow">立即支付</u-button></view>
			</view>
		</u-popup>

	</view>


</template>

<script>
	import {
		request,
		baseUrl
	} from '../../http/request.js';
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				resumeInfo: [],
				show: false,
				collectList: [],
				_id: "",
				teacherID: '',
				isCollect: false
			}
		},
		onShow() {
			this._id = uni.getStorageSync('_id'),
				this.getCollect()
		},
		onLoad(query) {
			// console.log('account:', decodeURIComponent(query.account));
			this.getResumeInfo(query._id)
			console.log("ppa", query._id)
			this.teacherID = query._id
		},
		methods: {
			handleContact(e) {
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			getLevelImage(level) {
				switch (level) {
					case '1':
						return this.baseUrl + 'images/static/home/bz.png';
					case '2':
						return this.baseUrl + 'images/static/home/zy.png';
					case '3':
						return this.baseUrl + 'images/static/home/zs.png';
					default:
						return this.baseUrl + 'images/static/home/bz.png'; // 或者您可以返回一个默认图片路径
				}
			},
			// 立即支付
			payNow() {
				console.log("立即支付")
			},
			//选择支付方式
			radioChange(e) {
				console.log('选中的那个', e.detail.value);
			},
			//立即购买
			buyNow() {
			if (uni.getStorageSync("_id")) {
				this.$http.ConsultationOrderHttp.AddConsultationOrde({
					teacher: this.teacherID,
					userId: uni.getStorageSync("_id"),
					account: uni.getStorageSync("phoneNumber")
				}).then(res => {
					console.log("咨询", res)
				
				}).catch(err => {
					console.log("err", err)
				})
				
				
				uni.navigateTo({
					url: '/pagesServiece/serviece/serviece'
				})
			}else{
				uni.$u.toast("请先登录");
			}

			},
			//图片选择
			getgenderImage(gender) {
				switch (gender) {
					case '男':
						return this.baseUrl + 'images/static/home/man.png';
					case '女':
						return this.baseUrl + 'images/static/home/woman.png';
					default:
						return this.baseUrl + 'images/static/home/man.png';
				}
			},
			async getResumeInfo(_id) {
				try {
					console.log('query._id', _id)
					const res = await this.$http.ResumeHttp.getResumeInfo({
						_id: _id
					});
					console.log("用户个人信息", res.item)
					this.resumeInfo = res.item[0];
				} catch (error) {
					console.log("错误信息", error)
				}
			},
			//立即沟通 
			contact() {
				uni.navigateTo({
					url: '/pagesServiece/serviece/serviece'
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			//获取收藏列表
			getCollect() {
				console.log('this._id', this._id)
				this.$http.LoginHttp.getCollect({
					_id: this._id
				}).then(res => {
					console.log("收藏列表", res)
					this.collectList = res.myCollection
					const isTeacherInCollection = this.collectList.find(item => item == this.teacherID);
					if (isTeacherInCollection) {
						this.isCollect = true
					} else {
						this.isCollect = false
					}
				}).catch(Error => {
					console.log("错误信息")
				})
			},
			//点击收藏
			addCollect() {
				if (uni.getStorageSync("_id")) {
					this.$http.LoginHttp.addCollection({
						_id: uni.getStorageSync("_id"),
						teacher: this.resumeInfo._id
					}).then(res => {
						console.log("收藏", res)
						if (res.code == 200) {
							uni.$u.toast(res.message);
							if (res.status) {
								this.isCollect = true
							} else {
								this.isCollect = false
							}
						}
					}).catch(Error => {
						console.log("错误信息", Error)
					})
				} else {
					uni.$u.toast("请先登录");
				}

			}
		}
	}
</script>

<style lang="scss">
	.bkcolor {
		overflow: auto;
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to right, #C1E1FD, #B6DBFE);
		background: linear-gradient(to bottom, #C1E1FD, #F6F6F6);
		position: relative;

		.title {
			width: 750rpx;
			height: 88rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// background-color: pink;
			position: absolute;
			top: 88rpx;
			display: flex;
			justify-items: center;
			padding: 0 17rpx;
			margin-bottom: 200rpx;
		}

		.back {
			height: 88rpx;
			line-height: 88rpx;
		}

		.bk {
			width: 48rpx;
			height: 48rpx;
			margin-top: 20rpx;

		}

		.titleName {
			width: 638rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.content {
		padding: 0 26rpx;
		background-color: #F6F6F6;

		width: 100%;
		padding-bottom: 200rpx;

		.teacherCard {
			width: 686rpx;
			height: 244rpx;
			padding: 32rpx 28rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;
			top: -100rpx;

			.card1 {
				display: flex;
				justify-content: space-between;

				.cardTxt {
					height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #000000;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.cardTxt1 {
					height: 44rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #00A0F7;
					line-height: 23rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;

					.sign {
						font-size: 20rpx;
					}
				}
			}

			.tags {
				height: 28rpx;
				width: 100%;
				margin-top: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				overflow: hidden;

				.tag {
					margin-right: 24rpx;
				}

				.txt1 {
					margin-left: 8rpx;
				}
			}

			.city {
				width: 638rpx;
				height: 56rpx;
				background: #EAF7FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin: 32rpx 0rpx;
				line-height: 56rpx;

				.cityTxt {
					display: flex;
					justify-content: space-between;
					padding: 0rpx 12rpx;
					font-size: 24rpx;
				}

				.cityICON {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
			}
		}

		.teacherDetail {
			width: 686rpx;
			height: 116rpx;
			background: #FFFFFF;
			position: relative;
			top: -60rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.teacherBOX {
				display: flex;
				align-items: center;
				padding: 22rpx 24rpx;

				.teacherImage {
					height: 72rpx;
					width: 72rpx;
					vertical-align: middle;
					margin-right: 16rpx;

				}

				.name {
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #111111;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.leveicon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}

				.time {
					height: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 8rpx;
				}
			}
		}

		.teacherResume {
			width: 686rpx;

			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx 24rpx;

			.title {
				height: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				position: relative;

				.bk {
					position: absolute;
					width: 132rpx;
					height: 8rpx;
					left: 0rpx;
					top: 34rpx;
				}
			}

			.contents {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 32rpx;
			}
		}
	}

	.buttom {
		width: 100%;
		height: 200rpx;
		padding: 20rpx 20rpx;
		display: flex;

		.collection {
			margin: 0rpx 50rpx;
		}

		.college {
			width: 36rpx;
			height: 36rpx;
		}

		.ctxt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;

		}
	}

	.btn {
		// width: 224rpx;
		width: 400rpx;
		height: 96rpx;
		margin: 0 auto;
	}

	//支付弹出层
	.showbox {
		width: 100%;

		padding: 48rpx 32rpx;
		background-color: #FBFBFB;

		.teacherName {
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
			}

			.t2 {
				font-size: 20rpx;
				color: #00A0F7;
				margin-left: 16rpx;
			}

			.t3 {
				font-size: 32rpx;
				color: #00A0F7;

			}
		}

		.concat {
			width: 686rpx;
			height: 102rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 26rpx 0rpx;
			line-height: 102rpx;

			.phone {
				width: 28rpx;
				height: 28rpx;
				margin-left: 42rpx;
			}

			.phoneNumber {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}

		.orderDetail {
			width: 686rpx;
			height: 540rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx 0rpx;
			padding: 32rpx 32rpx;

			.content1 {
				width: 100%;
				margin-bottom: 48rpx;

				.t1 {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 16rpx;
				}

				.t2 {
					width: 144rpx;
					height: 66rpx;
					background: rgba(0, 160, 247, 0.05);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #00A0F7;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #00A0F7;
					line-height: 66rpx;
					text-align: center;
				}
			}

			.orderInformation {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.number {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;

				}
			}
		}

		.payWay {
			width: 686rpx;
			height: 204rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.wxpay {
				display: flex;
				padding: 36rpx 24rpx;
				box-sizing: border-box;
				height: 102rpx;
				border-bottom: 1rpx solid #F2F2F2;
				justify-content: space-between;

				.wximg {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;

				}

				.wxtxt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					margin-left: 8rpx;
				}

			}

		}

	}

	.pay {
		width: 100%;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.paybtn {
			width: 684rpx;
			height: 96rpx;
			margin: 0 auto;
		}
	}
</style>
<ss></ss>